<script setup>
import defaultUserImg from '@/assets/defult-user-img.png'
import { ref } from 'vue'
import {
  userGetUserinfoService,
  userModifyUserImgService,
  userModifyUserinfoService
} from '@/api/user'
import { baseURL } from '@/utils/request'
import { ZlMessage } from '@/utils/message'
import { useUserStore } from '@/stores'
import { IconCamera } from '@arco-design/web-vue/es/icon'

// 用户仓库
const userStore = useUserStore()
const userInfo = ref({})

const getUserInfo = async () => {
  const res = await userGetUserinfoService()
  if (res.data.data.userImg == null || res.data.data.userImg == '') {
    res.data.data.userImg = defaultUserImg
  } else {
    res.data.data.userImg = baseURL + res.data.data.userImg
  }
  userInfo.value = res.data.data
}

// 是否显示头像的遮罩
const isShowPhotoShade = ref(false)
// 鼠标移动到头像上
const handleMouseOverPhoto = () => {
  isShowPhotoShade.value = true
}
// 鼠标移出头像
const handleMouseLeavePhoto = () => {
  isShowPhotoShade.value = false
}

// 单击头像的遮罩，触发选择文件切换头像的事件
const onSelectImg = async (uploadFile) => {
  userInfo.value.userImg = URL.createObjectURL(uploadFile.raw)
  // 将图片提交至后端
  const fd = new FormData()
  fd.append('userImg', uploadFile.raw)
  const res = await userModifyUserImgService(fd)
  ZlMessage.success(res.data.msg)
  const tmp = await userGetUserinfoService()
  tmp.data.data.userImg = baseURL + tmp.data.data.userImg
  userStore.setUserInfo(tmp.data.data)
}
getUserInfo()

// 修改信息弹框
const dialogFormVisible = ref(false) // 是否显示修改信息弹框
// 打开修改信息弹框
const nickName = ref()
const synopsis = ref()
const modifyAntishake = ref(false)
const openDialog = () => {
  nickName.value = userInfo.value.nickName
  synopsis.value = userInfo.value.synopsis
  dialogFormVisible.value = true
}
// 关闭修改信息弹框
const closeDialog = () => {
  dialogFormVisible.value = false
}

// 修改信息弹框表单校验规则
const dialogFormRef = ref()
const rules = {
  nickName: [
    {
      validator: (rule, value, callback) => {
        if (value.length > 20) {
          callback(new Error('用户名长度必须小于20个字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  synopsis: [
    {
      validator: (rule, value, callback) => {
        if (value.length > 50) {
          callback(new Error('个人介绍必须小于50个字符'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
// 确认修改资料
const modifyConfirm = async () => {
  if (modifyAntishake.value) {
    ZlMessage.warning('休息一下再提交吧')
    return
  }
  userInfo.value.nickName = nickName.value
  userInfo.value.synopsis = synopsis.value
  // 这里检验的是绑定表单 model 的值，所以要先赋值给 userInfo
  await dialogFormRef.value.validate()

  const res = await userModifyUserinfoService(userInfo.value)
  ZlMessage.success(res.data.msg)
  dialogFormVisible.value = false
  getUserInfo()
  modifyAntishake.value = true
  setTimeout(() => {
    modifyAntishake.value = false
  }, 5000)
}
</script>

<template>
  <div>
    <!-- 修改信息弹框 -->
    <el-dialog v-model="dialogFormVisible" title="用户信息" width="500">
      <el-form :model="userInfo" ref="dialogFormRef" :rules="rules">
        <!-- 用户名输入框 -->
        <el-form-item label="用户名：" label-width="70px" label-position="left">
          <el-input
            v-model="userInfo.username"
            autocomplete="off"
            :disabled="true"
          />
        </el-form-item>

        <!-- 邮箱输入框 -->
        <el-form-item label="邮箱：" label-width="70px" label-position="left">
          <el-input
            v-model="userInfo.email"
            autocomplete="off"
            :disabled="true"
          />
        </el-form-item>

        <!-- 昵称输入框 -->
        <el-form-item
          label="昵称："
          label-width="70px"
          label-position="left"
          prop="nickName"
        >
          <el-input v-model="nickName" label-width="200px" autocomplete="off" />
        </el-form-item>

        <!-- 介绍输入框 -->
        <el-form-item
          label="介绍："
          label-width="70px"
          label-position="left"
          prop="synopsis"
        >
          <el-input v-model="synopsis" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="modifyConfirm"> 修改 </el-button>
      </template>
    </el-dialog>

    <el-row class="info" style="justify-content: space-between">
      <!-- 头像 + 信息 -->
      <el-row>
        <!-- 用户头像部分 -->
        <el-row style="padding-right: 20px; align-items: center">
          <div
            style="
              height: 80px;
              width: 80px;
              overflow: hidden;
              border-radius: 50%;
              position: relative;
              cursor: pointer;
              display: flex;
              align-items: center;
              box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
            "
            @mouseover="handleMouseOverPhoto"
            @mouseleave="handleMouseLeavePhoto"
          >
            <a-image
              :src="userInfo.userImg"
              width="80px"
              height="80px"
              reload
              :preview="false"
            ></a-image>
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="onSelectImg"
            >
              <div
                style="
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: rgba(0, 0, 0, 0.5);
                "
                v-show="isShowPhotoShade"
              >
                <icon-camera style="width: 40%; height: 40%; color: white" />
              </div>
            </el-upload>
          </div>
        </el-row>
        <!-- 用户信息部分 -->
        <el-row style="flex-direction: column; justify-content: flex-start">
          <el-row>
            <el-text style="font-size: 30px">{{ userInfo.nickName }}</el-text>
          </el-row>
          <el-row style="padding-top: 5px">
            <el-text style="width: 65px">邮箱账号: </el-text>
            <el-text style="margin-left: 5px">{{ userInfo.email }}</el-text>
          </el-row>

          <el-row style="padding-top: 5px">
            <el-text style="width: 65px">注册时间: </el-text>
            <el-text style="margin-left: 5px">{{
              userInfo.createTime
            }}</el-text>
          </el-row>

          <el-row style="padding-top: 5px">
            <el-text style="width: 65px">个人介绍: </el-text>
            <el-text style="margin-left: 5px">{{ userInfo.synopsis }}</el-text>
          </el-row>
        </el-row>
      </el-row>
      <el-row style="flex-direction: column">
        <el-text
          tag="span"
          type="primary"
          style="cursor: pointer"
          @click="openDialog"
          >修改资料</el-text
        >
      </el-row>
    </el-row>
  </div>
</template>
